                                          <!-- 分类滑动组件 -->

<!-- 传入属性 -->
<!-- leftList:左部渲染数组
     rightList:右部渲染数组 -->
<!-- 传入方法 -->
<!-- leftClickBtn：使用父组件函数 传递点击的位置信息index
     rightItemBtn：使用父组件函数  传递右部成员点击位置index  点击id  点击内容value -->

<template>
    <view class="com-classificationSliding">
        <!-- 左边导航栏 -->
        <!-- --------------------------------------------------------------------------------------- -->
        <scroll-view
            scroll-y="true"
            scroll-with-animation="true"
            id="classLeft"
            @scroll="leftScroll"
            class="classificationSliding-left"
        >
            <!-- 左边导航栏成员 -->
            <view
                class="classificationSliding-left-item"
                v-for="(value, index) in leftList"
                :class="{
                    leftClickShow: index == leftIndex ? true : false,
                    leftItemRadius: index == leftIndex + 1 ? true : false,
                }"
                :key="index"
                :id="'L' + index"
                @click="leftClick(index)"
            >
                <!-- 成员图标展示 -->
                <text v-show="index == leftIndex"></text>
                <view>{{ value }}</view>
            </view>

            <view
                :style="[
                    { height: leftBottomHeight * 2 + 'rpx' },
                    { backgroundColor: '#fff' },
                    { width: '100%' },
                    {
                        borderRadius:
                            leftIndex == leftList.length - 1
                                ? '0rpx 16rpx 0rpx 0rpx'
                                : '',
                    },
                ]"
            >
            </view>
        </scroll-view>

        <!-- 右部滑动区域 -->
        <!-- --------------------------------------------------------------------------------------- -->
        <scroll-view
            scroll-y="true"
            scroll-with-animation="true"
            @scroll="scroll"
            id="classRight"
            :scroll-into-view="itemId"
            class="classificationSliding-right"
        >
            <!-- 右部选择区域 -->
            <!-- ============================================================================ -->
            <view
                class="classificationSliding-right-show"
                v-for="(item, index) in rightList"
                :key="'R' + index"
                :id="'R' + index"
            >
                <!-- 标题 -->
                <view class="classificationSliding-right-show-title">{{
                    item.title
                }}</view>

                <!-- 成员组成外框-->

                <view class="classificationSliding-right-show-const">
                    <!-- 组成成员 -->
                    <view
                        class="classificationSliding-right-show-const-item"
                        v-for="(v, i) in item.contentVoList"
                        :key="'r' + i"
                        @click="rightItem(i, v.sectionId, v.title)"
                        :class="{
                            constItemThree: (i + 1) % 3 == 0 ? true : false,
                            constItemTop:
                                i == 0 || i == 1 || i == 2 ? false : true,
                        }"
                    >
                        <!-- 图片 -->
                        <view
                            class="classificationSliding-right-show-const-item-img"
                            :style="{
                                backgroundImage: 'url(' + v.logoUrl + ')',
                            }"
                        >
                        </view>
                        <!-- 描述 -->
                        <view
                            class="classificationSliding-right-show-const-item-title"
                        >
                            {{ v.title }}
                        </view>
                    </view>
                </view>
            </view>
            <view :style="{ height: bottomHeight * 2 + 'rpx' }"></view>
        </scroll-view>
    </view>
</template>

<script>
export default {
    props: {
        // 左部渲染数组
        leftList: {
            type: [Array],
            default() {
                return [];
            },
        },

        // 右部渲染数组
        rightList: {
            type: [Array],
            default() {
                return [];
            },
        },
    },
    mounted() {},
    data() {
        return {
            // 左部点击位置信息
            leftIndex: 0,
            // 左部滑动的距离
            LeftTop: 0,
            // 左部填充框的高度
            leftBottomHeight: '',

            // 右部点击跳转锚点id
            itemId: '',

            // 下部空白距离
            bottomHeight: '',
        };
    },
    watch: {
        // 监听左部数组变化
        leftList() {
            // 为左右两边下部空余部分添加高度
            // ---------------------------------------------------------------------------------------
            // 获取左部一个成员的高度
            // let leftItems = document.getElementById('L' + 0).clientHeight;
            let leftItems = 50;
            // 获取左部外框的高度
            let leftHeights = document.getElementById('classLeft').clientHeight;
            this.leftBottomHeight =
                leftHeights - leftItems * this.leftList.length;
        },
        // 监听左部位置信息的变化
        leftIndex() {
            // 获取每个成员到其父级上方的高度
            let leftOffsetTop = document.getElementById(
                'L' + this.leftIndex,
            ).offsetTop;

            // 获取每个成员的高度
            let leftClientHeight = document.getElementById(
                'L' + this.leftIndex,
            ).clientHeight;

            // 获取父级高度（滑动区域外层）
            let clientHeight =
                document.getElementById('classLeft').clientHeight;

            // 判断每个成员到父级上方的高度leftOffsetTop 是否 大于或者等于 父级（可视区域包裹）的高度clientHeight
            // 并且 每个成员到父级上方的高度leftOffsetTop  - 左部滑动距离LeftTop（因为此数据是先除非此监听后，才能更新故需要进行 与  每个成员的高度leftClientHeight 进行相加）大于或者等于父级高度时clientHeight
            if (
                leftOffsetTop >= clientHeight &&
                leftOffsetTop - this.LeftTop + leftClientHeight >= clientHeight
            ) {
                // 满足条件则将其移动到底部可视区域
                document.getElementById('L' + this.leftIndex).scrollIntoView({
                    behavior: 'instant',
                    block: 'end',
                });

                // 判断 左部滑动距离LeftTop（因为此数据是先除非此监听后，才能更新故需要进行 与  每个成员的高度leftClientHeight 进行相加）大于  每个成员到其父级上方的高度leftOffsetTop 时
            } else if (this.LeftTop + leftClientHeight >= leftOffsetTop) {
                // 则触发，使其移动到头部
                document.getElementById('L' + this.leftIndex).scrollIntoView({
                    behavior: 'instant',
                    block: 'start',
                });
            }

            // 判断右部最后是否有位置信息 有则不进行添加值，没有则进行
            if (!this.bottomHeight) {
                // 获取右部最后一个元素的高度
                let bottoms = document.getElementById(
                    'R' + (this.rightList.length - 1),
                ).clientHeight;

                // 获取右部整个的高度
                let allHeighg =
                    document.getElementById('classRight').clientHeight;
                // 给右部底部元素块高度赋值  为bottoms-allHeighg
                this.bottomHeight = allHeighg - bottoms;
            }
        },
    },
    methods: {
        // 左部成员点击函数
        leftClick(index) {
            // 同步左部点击位置
            this.leftIndex = index;
            // 同步点击置顶的id
            this.itemId = 'R' + index;

            // 使用父组件函数 传递点击的位置信息index
            this.$emit('leftClickBtn', {
                index: index,
            });
        },

        // 左边滑动函数
        leftScroll(e) {
            // 获取左边父级滑动的距离
            this.LeftTop = e.detail.scrollTop;
        },

        // 右部滑动函数
        scroll(e) {
            // 初始化置顶id
            this.itemId = '';

            // 获取卷入上方的长度
            let top = e.detail.scrollTop;

            // 获取父级高度（滑动区域外层）
            let clientHeight =
                document.getElementById('classRight').clientHeight;

            this.leftList.forEach((value, index) => {
                // 获取每个成员到其父级上方的高度
                let offsetTop = document.getElementById('R' + index).offsetTop;

                // 判断区域被卷入高度offsetTop - 每个子级到父级（id：homeServiceShow）的顶部距离 的区间算法  若满足此区间则同步选择成员组件
                if (offsetTop - top >= -20 && offsetTop - top <= 150) {
                    // 同步上方头部选择位置
                    this.leftIndex = index;

                    // 判断区域被卷入高度offsetTop - 每个子级到父级（id：homeServiceShow）的顶部距离 的区间算法  若是此距离满足在父级高度clientHeight内部且大于上方头部传输临界点距离的  则对其同步位置回归-1
                }
                // else if (
                // 	offsetTop - top > 150 &&
                // 	offsetTop - top < clientHeight
                // ) {
                // 	this.leftIndex = index - 1;
                // }
            });
        },

        // 右部成员点击函数
        rightItem(index, id, value) {
            // 使用父组件函数  传递右部成员点击位置index  点击id  点击内容value
            this.$emit('rightItemBtn', {
                index: index,
                id: id,
                value: value,
            });
        },
    },
};
</script>

<style lang="less" scoped>
// 分类滑动组件
.com-classificationSliding {
    width: 100%;
    height: 100%;
    display: flex;
    font-size: 28rpx;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    color: #333333;

    // 左部导航栏
    // ---------------------------------------------------------------------
    .classificationSliding-left {
        width: 200rpx;
        height: 100%;
        transition: all 0.6s;
        background-color: #f8f8f8;
    }

    // 左部导航栏成员
    .classificationSliding-left-item {
        width: 100%;
        height: 100rpx;
        transition: all 0.6s;
        display: flex;
        align-items: center;
        background-color: #ffffff;
        position: relative;
    }

    // 成员定位图标
    .classificationSliding-left-item text {
        width: 8rpx;
        height: 40rpx;
        background: #30b88f;
        border-radius: 0rpx 10rpx 10rpx 0rpx;
    }

    // 文字部分
    .classificationSliding-left-item view {
        position: absolute;
        left: 44rpx;
    }

    // 左部成员选中样式
    .leftClickShow {
        font-family: PingFangSC, PingFangSC-Medium;
        font-weight: 500;
        text-align: center;
        color: #15a177;
        background-color: #f8f8f8;
    }

    // 左部成员上圆角样式
    .leftItemRadius {
        border-radius: 0rpx 16rpx 0rpx 0rpx;
    }

    // 右部滑动区域
    // ---------------------------------------------------------------------
    .classificationSliding-right {
        width: 490rpx;
        height: 100%;
        margin-left: 30rpx;
    }

    .classificationSliding-right > :nth-child(1) {
        margin-top: 40rpx;
    }

    // 右部选择区域
    // ===========================================================================
    .classificationSliding-right-show {
        width: 100%;
        background: #ffffff;
        border-radius: 16rpx;
        box-shadow: 0rpx 4rpx 16rpx 0rpx #f5f5f5;
        padding: 32rpx 0 48rpx 0;
        margin-bottom: 20rpx;
    }

    // 选择区域标题
    .classificationSliding-right-show-title {
        width: 424rpx;
        height: 32rpx;
        font-size: 32rpx;
        font-family: PingFangSC, PingFangSC-Medium;
        font-weight: 500;
        text-align: left;
        color: #333333;
        line-height: 32rpx;
        margin: auto;
    }

    // 成员组成外框
    .classificationSliding-right-show-const {
        width: 432rpx;
        margin: 40rpx auto auto auto;
        display: flex;
        flex-flow: wrap;
    }

    // 组成成员
    .classificationSliding-right-show-const-item {
        width: 96rpx;
        height: 130rpx;
        // border: solid 1px;
        display: flex;
        flex-flow: column;
        align-items: center;
        margin-right: 72rpx;
    }

    // 组成成员图片
    .classificationSliding-right-show-const-item-img {
        width: 88rpx;
        height: 88rpx;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    // 描述
    .classificationSliding-right-show-const-item-title {
        width: 100%;
        height: 26rpx;
        font-size: 24rpx;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        text-align: center;
        color: #333333;
        line-height: 26rpx;
        margin-top: 16rpx;
    }

    // 每第3个成员改变样式
    .constItemThree {
        margin-right: 0;
    }

    .constItemTop {
        margin-top: 44rpx;
    }
}
</style>
